﻿@model DrillOnline.Services.DrillScenarios

@{
    ViewBag.Title = "CtrlPanel";
}

@section scripts {

    <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.3.js"></script>
    <script src="~/Scripts/arttemplate.js"></script>

    <script src="~/signalr/hubs"></script>

    <script type="text/javascript">
        
        $(function () {

            var scenario = $.connection.drillEventHub;

            scenario.client.Broadcast = function (result) {

            };

            scenario.client.PushMessage = function (datetimeNow, stringUser, stringGroup, datetimeScenariosTime, stringMessage) {
                //showMessage(datetimeNow, stringUser, stringGroup, datetimeScenariosTime, stringMessage);
            };
            scenario.client.StatusChange = function (Now, IsReady, Status) {
                updateStatus(Now,IsReady,Status);
            }
            scenario.client.PlayIndexChange=function(Now,ST,PO,SortIndex,Offset,stt,nowt){
                updatePlayIndex(nowt,stt,PO,SortIndex,Offset);
            }
            $.connection.hub.start().done(function () {
                updateStatus(null, @(Model.IsReady ? "true" : "false"), @(Model.Timeline.Status));
                try{
                    updatePlayIndex('@(DateTime.Now.ToString("yyyy年MM月dd日HH点mm分"))','@(Model.Timeline.StoryBaseTime.AddSeconds(Model.Timeline.PlayingOffset).ToString("yyyy年MM月dd日HH点mm分"))',@(Model.Timeline.PlayingOffset),@(Model.SceneList[@Model.Timeline.PlayingSceneIndex].Model.SortIndex) ,null);
                }catch(e){
                }
                
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
        function updatePlayIndex(Now,ST,PO,SortIndex,Offset){
            var e = $("div#events #e" + SortIndex);
            $("div#events .ce").removeClass("ce");
            e.addClass("ce");
            var nt=e.offset().top-e.parent().offset().top-16;

            $("#events").parent().animate({ scrollTop: nt }, 1000);
                    
            
            $("#prop_crt").text(Now);
            $("#prop_cst").text(ST);
            var po=new Date(PO*1000);
            $("#prop_et").text(""+(po.getDate()-1)+"天"+(po.getHours()-8)+"小时"+po.getMinutes()+"分"+po.getSeconds()+"秒");
    
        }
        

        function updateStatus(Now, IsReady, Status) {
            var t = "";
            var s = 0; var c = 0;
            if (!IsReady) {
                t = "未开始";
                s = 0;
            } else {
                s = 1;
                c = Status;
                if (Status == 0) {
                    t = "已停止";
                } else if (Status == 1) {
                    t = "已暂停";
                } else if (Status == 2) {
                    t = "进行中";
                }
            }
            $("#playstatus").text("["+t+"]");
            if (IsReady) {
                $('#controller').slideDown('slow');
            } else {
                $('#controller').slideUp('slow');
            }

            $("#ctrlpanel .button").removeClass("hl");
            $("#ctrlpanel #s" + s).addClass("hl");
            $("#ctrlpanel #c" + c).addClass("hl");
        }
    </script>
    <script type="text/javascript">

        function showMessage(datetimeNow, stringUser, stringGroup, datetimeScenariosTime, stringMessage) {
            $(template.render('chatitem', { datetimeNow: datetimeNow, stringUser: stringUser, stringGroup: stringGroup, datetimeScenariosTime: datetimeScenariosTime, stringMessage: stringMessage })).prependTo($('#discussion'))
                .fadeIn("slow");
        }

    </script>

    <script id="chatitem" type="text/html">
        <li style="display: none"><strong><%=datetimeScenariosTime%></strong> From <strong><%=stringGroup%>/<%=stringUser%></strong>
            <p><%=stringMessage%></p>
            <div>现实时间：<%=datetimeNow%></div>
        </li>
    </script>
}

<section style="float: left; width: 50%; min-height: 400px">
    <section id="menuol" class="bg-white" style="max-height: 600px; overflow: auto; float: right; width: 100%; margin-right: 4px;">
        <div id="events" style="padding: 4px; border-bottom: 1px solid #fa6800;">
            @foreach (var item in Model.SceneList.OrderBy(v => v.Model.SortIndex))
            {
                <div id="e@(item.Model.SortIndex)" style="padding:4px;border-bottom:1px solid #fa6800;">
                    <div style="font-weight: bold">
                        <span title="序号">@item.Model.SortIndex</span>,
                        <span title="注入时间">@TimeSpan.FromSeconds(item.Model.OffsetSec).ToString()</span>,
                        <span title="信息来源">@item.Model.Source</span>,
                        <span title="类别">@item.Model.EventType</span>,                        
                        <span title="目标分组">@item.Model.TargetGroup</span>,                        
                        <span title="注入方式">@item.Model.InectType</span>
                    </div>
                    <div>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp; @item.Model.Title</span>
                    </div>
                </div>
            }
        </div>

    </section>
</section>

<section style="float: right; width: 50%; min-height: 400px">
    <section id="itemol" class="bg-white" style="max-height: 600px; overflow: auto; float: left; width: 100%; margin-left: 4px; padding: 0px 6px 0px 6px;">
        <h2>演练过程控制：</h2>
        <div id="ctrlpanel">
            <div id="controller" style="display:@(ThisSession.IsReady ? "block" : "none");">
                <div id="c2" class="button small">@Ajax.ActionLink("播放", null, new { ctrl = "StoryStart" }, new AjaxOptions { HttpMethod = "POST" })</div>
                <div id="c1" class="button small">@Ajax.ActionLink("暂停", null, new { ctrl = "StoryPause" }, new AjaxOptions { HttpMethod = "POST" })</div>
                <div id="c0" class="button small">@Ajax.ActionLink("停止", null, new { ctrl = "StoryStop" }, new AjaxOptions { HttpMethod = "POST" })</div>
                <hr />
            </div>
            <div>
                <div id="s1" title="演练过程开始并允许加入" class="button">@Ajax.ActionLink("演练过程开始", null, new { ctrl = "ScenariosStart" }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "" })</div>
                <div id="s0" title="演练过程结束并保存结果" class="button">@Ajax.ActionLink("演练过程结束", null, new { ctrl = "ScenariosStop" }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "" })</div>
            </div>
        </div>
        <hr />
        <table>
            <tr>
                <td>
                    <p class="prop">
                        <label>发生时刻</label>@Model.Subject.StoryBaseTime.ToString("yyyy年MM月dd日HH点mm分")
                    </p>
                    <p class="prop">
                        <label>事件时长</label>@TimeSpan.FromSeconds(Model.Subject.TotalPlayingSec).ToString()
                    </p>
                    <p class="prop">
                        <label>演练速度</label>1 : @Model.Subject.PlayingRate
                    </p>


                </td>
                <td>


                    <p class="prop">
                        <label>当前时间</label><span id="prop_cst">@Model.Timeline.RealCurrentTime.ToString("yyyy年MM月dd日HH点mm分")</span>
                    </p>
                    <p class="prop">
                        <label>震后时间</label><span id="prop_et">@TimeSpan.FromSeconds(Model.Timeline.PlayingOffset).ToString()</span>
                    </p>
                    <p class="prop">
                        <label>现实时间</label><span id="prop_crt">@Model.Timeline.RealCurrentTime.ToString("yyyy年MM月dd日HH点mm分")</span>
                    </p>
                </td>
            </tr>
        </table>
        <hr />
        <hr />
        <pre>@Html.DisplayFor(m => Model.Subject.Description)</pre>

    </section>
</section>
